<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流描述文件生成</title>
    <style>
        body {
            font-size: 20px;
        }
        div {
            width: 1100px;
            margin: 0 auto;
        }
        input {
            margin-left: 10px;
        }
        fieldset {
            margin-top: 20px;
        }
        select {
            margin: 0 10px;
            width: 60px;
        }
        ul {
            padding: 0;
            margin: 0;
            font-weight: bold;
        }
        li {
            font-weight: normal;
            margin: 10px 0 0 20px;
        }
        table {
            margin-top: 20px;
            width: 50%;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <p><span>仿真时长</span><input type="text" placeholder="请输入正数"><span style="margin-left: 10px">秒</span></p>
        <p><span>拓扑文件</span><input type="file"></p>
        <p><span>输出文件</span><input type="file"></p>
        <fieldset>
            <legend>自定义流size的CDF分布</legend>
            <button>添加自定义CDF分布</button>
            <div>
                <p>CDF分布名<input type="text" placeholder="请输入CDF分布名称"></p>
                <span>流size</span><input type="text" placeholder="请输入正数">
                <select>
                    <option>KB</option>
                    <option>MB</option>
                    <option>GB</option>
                </select>
                <span>累计分布</span><input type="text" placeholder="请输入[0,1]之间的数值">
                <button>添加</button>
                <p><button>确认CDF分布</button></p>
            </div>
            <p>CDF分布1</p>
            <table border=1>
                <tr>
                    <th>流大小</th>
                    <th>累计分布值</th>
                </tr>
                <tr>
                    <td>10KB</td>
                    <td>0.5</td>
                </tr>
                <tr>
                    <td>100KB</td>
                    <td>1.0</td>
                </tr>
            </table>
            <p>CDF分布2</p>
            <table border=1>
                <tr>
                    <th>流大小</th>
                    <th>累计分布值</th>
                </tr>
                <tr>
                    <td>10KB</td>
                    <td>0.3</td>
                </tr>
                <tr>
                    <td>100KB</td>
                    <td>0.8</td>
                </tr>
                <tr>
                    <td>1GB</td>
                    <td>1.0</td>
                </tr>
            </table>
        </fieldset>
        <fieldset>
            <legend>流描述</legend>
            <p class="flow">
                <span>源目选取粒度</span>
                <select>
                    <option>主机</option>
                    <option>POD</option>
                </select>
                <span>源</span>
                <select>
                    <option>1</option>
                    <option>2</option>
                </select>
                <span>目</span>
                <select>
                    <option>1</option>
                    <option>2</option>
                </select>
                <span>应用类型</span>
                <select>
                   <option>HTTP</option>
                   <option>DNS</option>
                </select>
                <span>流数目</span>
                <input type="text" width="20px" placeholder="请输入正整数">
                <span>流来源</span>
                <select>
                    <option>真实Trace</option>
                    <option>真实Trace流size的CDF分布</option>
                    <option>CDF分布1</option>
                    <option>CDF分布2</option>
                </select>
                <button>添加流</button>
                <table border=1 style="width: 100%;">
                    <tr>
                        <th>源目选取粒度</th>
                        <th>源</th>
                        <th>目</th>
                        <th>应用类型</th>
                        <th>流数目</th>
                        <th>流来源</th>
                    </tr>
                    <tr>
                        <td>主机</td>
                        <td>1</td>
                        <td>2</td>
                        <td>HTTP</td>
                        <td>20</td>
                        <td>真实Trace</td>
                    </tr>
                    <tr>
                        <td>POD</td>
                        <td>2</td>
                        <td>1</td>
                        <td>FTP</td>
                        <td>1</td>
                        <td>CDF分布1</td>
                    </tr>
                </table>
            </p>
        </fieldset>
    </div>
</body>
</html>